<template>
	<view>
		<view class="tablist">
			<view class="tablist-item" v-for="(item,index) in list" :key="index">
				<block v-if="!item.state">
				<image :src="item.selectimg" v-if="tabindex == index"  mode=""></image>
				<image :src="item.img" mode="" v-else></image>
				<view class="tab-txt" :class="tabindex == index ? 'color' :''">
					{{item.txt}}
				</view>
				</block>
				<view class="box" v-else>
					<image src="../static/加号.png"  mode="" class="jia"></image>
					<view class="box-txt">
						常用
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tab",
		props:{
			tabindex:0
		},
		data() {
			return {
				list:[
					{
						txt:'工作',
						img:'../static/工作.png',
						selectimg:'../static/工作1.png',
					},
					{
						txt:'助手',
						img:'../static/助手.png',
						selectimg:'../static/助手1.png',
					},
					{
						txt:'工作',
						state:true
					},
					{
						txt:'分析',
						img:'../static/分析.png',
						selectimg:'../static/分析1.png',
					},
					{
						txt:'我的',
						img:'../static/我的.png',
						selectimg:'../static/我的1.png',
					}
				]
			};
		}
	}
</script>

<style lang="less">
.tablist{
	position: fixed;
	width: 100%;
	height: 140rpx;
	align-items: center;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	border-top: 2rpx solid #e8e8e8;
	font-size: 22rpx;
	text-align: center;
	image{
		width: 65rpx;
		height: 65rpx;
	}
	.box{
		background: #fff;
		position: relative;
		top: -50rpx;
		width: 130rpx;
		height: 130rpx;
		text-align: center;
		border-radius: 50%;
		box-sizing: border-box;
		padding-top: 5rpx;
		border-top: 2rpx solid #e8e8e8;
	}
	.jia{
		width: 110rpx;
		height: 110rpx;
	}
	.box-txt{
		margin-top: -10rpx;
	}
}
.color{
	color: #6ba509;
}
</style>